<template>
  <div class="html">
    <a-row justify="left" align="top" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
        <a-col :xs="24" :sm="24" :md="12" :xl="8" v-for="(item,index) in dataList" :key="index" flex>
            <Card :data="item"></Card>
        </a-col>
    </a-row>
    <div class="loading">
        <a class="data" v-show="loading" href="#" @click.prevent="getMore">加载更多</a>
        <a class="noData" v-show="!loading" href="#" @click.prevent="0">暂时没有了/(ㄒoㄒ)/~~</a>
    </div>
  </div>
</template>

<script>
import Card from '@/components/Card'
import {headerHeight} from '@/hooks/useHeader'
import {reactive, toRefs, getCurrentInstance} from 'vue'
export default {
  setup(props){
    headerHeight()

    const {proxy} = getCurrentInstance()

    let data = reactive({
      dataList:[],
      index:1,
      key:'',
      sort:'',
      loading:true
    })

    let methods = reactive({
      getFrontEndData(){
        proxy.$api.getFrontEndData('html','asc',data.index).then((res)=>{
          if(res.code == 200){
            data.dataList = res.data
          }
        })
      },
      getMore(){

      }
    })

    methods.getFrontEndData()

    return {
      ...toRefs(data)
    }
  },
  components:{ Card }
}
</script>

<style lang="less" scoped>
@import url('@/assets/less/color.less');
.html{
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 80px;
  .loading{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    .data{
        background-color: @f-active;
        padding: 8px 14px;
        color: @f-color2;
        font-size: 1.6rem;
        border-radius: 4px;
        transition: all 0.5s;
        &:hover{
            background-color: @f-hover;
        }
    }
}
}
</style>